<template>
  <div>
    <navigation></navigation>
    <div class="search">
      <div class="categoryitem-all">
        <ul>
          <li v-for="(item, index) in lsit" :key="index">
            <category-item-comp :gameItem="item"></category-item-comp>
          </li>
        </ul>
      </div>

      <div class="notfond" v-if="noen">
        未找到关于 <span style="color: red"> {{ keyName }} </span> 的信息
      </div>

      <div v-if="displays" class="noenmessage">没有更多数据了</div>
    </div>
    <go-top></go-top>
    <bottom></bottom>
  </div>
</template>

<script>
import { likeGame } from "../../network/showGame";

import Bottom from "../../components/bottom/bottom";
import GoTop from "../../components/gotop/goTop";
import Navigation from "../../components/navigation/navigation";
import CategoryItemComp from "../gamelibrary/gamelibrayComp/categoryItemComp";
export default {
  components: { Navigation, Bottom, GoTop, CategoryItemComp },
  name: "Search",
  data() {
    return {
      lsit: [],
      pages: 1,
      page: "",
      noen: false,
      keyName: this.$route.query.keyName,
      displays: false,
    };
  },
  created() {
    this.getGame();
    this.displays = true;
  },
  mounted() {
    window.addEventListener("scroll", this.scrollNav);
  },
  methods: {
    getGame() {
      likeGame(this.keyName, this.pages).then((res) => {
        console.log(1);
        this.page = res.data.data.pages;
        if (this.page == 0) {
          this.noen = true;
        } else {
          if (this.pages == this.page) {
            console.log(this.pages);
            this.lsit.push(...res.data.data.list);
            this.displays = true;
          } else {
            this.displays = false;
            this.pages += 1;
            this.lsit.push(...res.data.data.list);
            console.log(this.pages, res);
          }
        }
      });
      console.log(this.$route.query.keyName);
    },

    scrollNav() {
      let bottom =
        document.documentElement.scrollHeight -
        document.documentElement.scrollTop -
        document.documentElement.clientHeight;
      if (bottom < 150 && !this.displays) {
        this.getGame();
        console.log(this.displays);
      }
    },
  },
};
</script>

<style>
.search {
  width: 80%;
  margin: 0 auto;
}

.notfond {
  width: 100%;
  text-align: center;
  font-size: 0.18rem;
  margin-top: 10%;
}
</style>